<!DOCTYPE html>
<html>
<head>
	<title>slot-scope</title>
	<meta charset="UTF-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		 <child>
			 <template slot-scope="props">
				 <h1>{{props.item}}</h1>
			 </template>
		 </child>
	</div>

	<script>
		Vue.component('child', {
			data: function() {
				return {
					list: [1, 2 ,3 ,4]
				}
			},
			template: `
				<ul>
					<slot v-for="item of list"
						  :item="item"
					>
					</slot>
				</ul>
			`,
			props: ['content']
		})

		var app = new Vue({
			el: '#app'
		})
	</script>

</body>
</html>